<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				overflow: hidden;
				width: 1080px;
				margin: 50px auto 0;
				user-select: none;
			}
			#wrap .top{
				overflow: hidden;
				width: 100%;
				height: 40px;
				background-color: #F5F5F5;
			}
			#wrap .title{
				position: relative;
				float: left;
				width: 84px;
				height: 40px;
				line-height: 40px;
				padding: 0 24px;
				font-size: 14px;
				background-color: #000;
				color: #fff;
			}
			#wrap .title:after{
				content: "";
				position: absolute;
				right: -12px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 0;
				height: 0;
				border: 6px solid transparent;
				border-left-color: #000;
			}
			#wrap .tab{
				float: left;
				width: 486px;
				height: 40px;
				margin-left: 30px;
			}
			#wrap .tab>li{
				position: relative;
				float: left;
				line-height: 40px;
				font-size: 14px;
				cursor: pointer;
			}
			#wrap .tab>li+li{
				margin-left: 32px;
			}
			#wrap .tab>li:hover{
				color: red;
			}
			#wrap .tab>li:after{
				content: "";
				width: 0;
				height: 2px;
				position: absolute;
				left: 50%;
				bottom: 0px;
				opacity: 0;
				background: #535353;
				transition: all .5s;
			}
			#wrap .tab>li:hover:after{
				width: 100%;
				left: 0;
				opacity: 1;
			}
			#wrap .imgs{
				display: block;
				padding-top: 30px;
			}
			#wrap .imgs li{
				display: none;
				overflow: hidden;
			}
			#wrap .imgs li div{
				float: left;
				width: 340px;
				height: 256px;
			}
			#wrap .imgs li div+div{
				margin-left: 30px;
			}
			#wrap .imgs img{
				width: 340px;
				height: 256px;
			}
			#wrap .imgs li.show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="top">
				<span class="title">独家精品策划</span>
				<ul class="tab">
					<li class="show">全部</li>
					<li>时装周</li>
					<li>潮我看齐</li>
					<li>搭配速成班</li>
					<li>恋物趣</li>
					<li>谁最有范</li>
				</ul>
			</div>
			<ul class="imgs">
				<li class="show">
					<div><a href=""><img src="img/1/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/1/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/1/3.jpg" alt=""></a></div>
				</li>
				<li>
					<div><a href=""><img src="img/2/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/2/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/2/3.jpg" alt=""></a></div>
				</li>
				<li>
					<div><a href=""><img src="img/3/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/3/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/3/3.jpg" alt=""></a></div>
				</li>
				<li>
					<div><a href=""><img src="img/4/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/4/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/4/3.jpg" alt=""></a></div>
				</li>
				<li>
					<div><a href=""><img src="img/5/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/5/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/5/3.jpg" alt=""></a></div>
				</li>
				<li>
					<div><a href=""><img src="img/6/1.jpg" alt=""></a></div>
					<div><a href=""><img src="img/6/2.jpg" alt=""></a></div>
					<div><a href=""><img src="img/6/3.jpg" alt=""></a></div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			let aTab = document.querySelectorAll(".tab>li"),
				aimgs = document.querySelectorAll(".imgs>li"),
				len = aTab.length;
			let index = 0;
				
				for(let i=0;i<len;i++){
					aTab[i].onmouseenter = function(){
						aimgs[index].className = "";
						aimgs[i].classList.add("show");
						index = i
					}
				}
		</script>
	</body>
</html>
